<template>
  <main>
    <article class="flex gap-x-4">
      <div class="icon">
        <cl-icon icon="Edit" :size="100"></cl-icon>
      </div>
      <cl-code-editor v-model="CODE_EDITOR.edit" class="w-[700px] h-20">
      </cl-code-editor>
    </article>

    <article class="flex gap-x-4">
      <div class="icon">
        <cl-icon
          icon="icon-web"
          color="blue"
          :size="100"
          tooltip="kwkw"
        ></cl-icon>
      </div>

      <cl-code-editor v-model="CODE_EDITOR.web" class="w-[700px] h-44">
      </cl-code-editor>
    </article>
  </main>
</template>
<script lang="ts" setup>
import { CODE_EDITOR } from "./code-editor";
</script>
<style lang="scss" scoped>
.icon {
  @apply flex justify-center items-center w-40 h-40 border p-4;
}
</style>
